{% extends 'common/goodspublic.html' %}
{% load static %}

{% block head %}
    <script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
    <script src="{% static 'js/time.js' %}"></script>
    <script src="{% static 'js/popup.mini.js' %}"></script>



{% endblock %}



{% block header %}
    <header data-am-widget="header" class="am-header am-header-default sq-head1">
        <div class="am-header-left am-header-nav">
            <a href="city.html" class="" style="color: #fff;">
                <img src="{% static 'images/city.png' %}"/>
                <p style="font-size: 12px; margin-top: -35px;" id="info">中国</p>
            </a>
        </div>
			<h1 class="am-header-title1">
		        <div class="search-box">
		           <a href="{% url 'haystack_search' %}" class="index-search" >搜索</a>
{#                     <input type="text" name="q" value="" class="index-search" placeholder="{{ query|default:'请输入您要的搜索的产品关键词' }}"/>#}
{#		        <input type="submit" value="" class="search-icon" />#}
		        </div>
		    </h1>
        <div class="am-header-right am-header-nav">
            <a href="tidings.html" class="">
                <div class="messgae"><span>10</span></div>
            </a>
        </div>
    </header>
{% endblock %}

{% block content %}
    <div style="height: 49px;"></div>
    <!--图片轮换-->
    <div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">
        <ul class="am-slides">
            {% for ban in banner %}
                <li><img src="{{ MEDIA_URL }}{{ ban.img_url }}"/></li>
            {% endfor %}
        </ul>
    </div>
    <!--导航-->
    <ul class="sq-nav">
        <li>
            <div class="am-gallery-item">
                <a href="recharge.html" class="">
                    <img src="{% static 'images/icon.png' %}"/>
                    <p>充值</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="javascript:;" class="index-qd">
                    <img src="{% static 'images/icon1.png' %}"/>
                    <p>签到</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="yhq.html" class="">
                    <img src="{% static 'images/icon2.png' %}"/>
                    <p>红包</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="" class="">
                    <img src="{% static 'images/icon3.png' %}"/>
                    <p>即将上线</p>
                </a>
            </div>
        </li>
    </ul>
    <ul class="sq-nav1">
        <li>
            <div class="am-gallery-item">
                <a href="speed.html" class="">
                    <img src="{% static 'images/icon4.png' %}"/>
                    <p>零食飞速</p>
                </a>
            </div>
        </li>
        <li>
            <div class="am-gallery-item">
                <a href="{% url 'goods:商品分类' '' '' %}" class="">
                    <img src="{% static 'images/icon4.png' %}"/>
                    <p>超市</p>
                </a>
            </div>
        </li>

    </ul>
    <div class="h-line"></div>
    <!--不规则展示-->
    <div class="index-product">
        <div class="index-pro-lf"><a href=""><img src="{% static 'images/s1.png' %}"/></a></div>
        <div class="index-pro-lr"><a href=""><img src="{% static 'images/s2.png' %}"/></a></div>
    </div>
    <div class="product-bot">
        <div class="product-bot-lf"><a href=""><img src="{% static 'images/s3.png' %}"/></a></div>
        <div class="product-bot-lr">
            <div class="top"><a href=""><img src="{% static 'images/s4.png' %}"/></a></div>
            <div class="bot">
                <div class="bot-lf"><a href=""><img src="{% static 'images/s5.png' %}"/></a></div>
                <div class="bot-lr"><a href=""><img src="{% static 'images/s6.png' %}"/></a></div>
            </div>
        </div>
    </div>
    <!--不规则展示-->
    <div class="h-line"></div>
    <!-- 特色专区-->
    {% for zone in zones %}
        <div class="sq-title">
            <img src="{% static 'images/ts.png' %}" width="26"/>
            {{ zone.title }}
        </div>
        <ul data-am-widget="gallery" class="am-gallery pro-list am-avg-sm-2 am-avg-md-2 am-avg-lg-4 am-gallery-default">
            {% for sku in zone.sku.all %}
                <li>
                    <div class="am-gallery-item">
                        <a href="{% url 'goods:商品详情' sku.id %}">
                            <img src=" {{ MEDIA_URL }}{{ sku.LOGO }}"/>
                            <h3 class="am-gallery-title">{{ sku.spu.spu_name }}{{ sku.sku_name }}</h3>
                            <div class="am-gallery-desc">￥{{ sku.price }}</div>
                        </a>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endfor %}
{% endblock %}

{% block foot %}
<!--签到-->
<div class="qd-box">
	<div class="popup-title">
			<span>签到成功</span>
			<div class="popup-close"><i class="iconfont">&#xe602</i></div>
	</div>
	<div class="dq-text">
		<img src="{% static 'images/qiandao.png' %}" width="40" />&nbsp; 您已连续签到3天
	</div>
</div>
<!--签到-->

  <!--底部-->
 <div style="height: 55px;"></div>
 <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default sq-foot am-no-layout" id="">
      <ul class="am-navbar-nav am-cf am-avg-sm-5">
          <li>
            <a href="{% url 'goods:超市主页' %}" class="">
                <span class="am-icon-home"></span>
                <span class="am-navbar-label">首页</span>
            </a>
          </li>
          <li>
            <a href="message.html" class="">
                <span class="am-icon-comments"></span>
                <span class="am-navbar-label">动态</span>
            </a>
          </li>
          <li>
            <a href="{% url 'shopcart:购物车' %}" class="">
                <span class="am-icon-shopping-cart"></span>
                <span class="am-navbar-label">购物车</span>
            </a>
          </li>
          <li>
            <a href="{% url 'orders:订单' %}" class="">
                <span class="am-icon-file-text"></span>
                <span class="am-navbar-label">订单</span>
            </a>
          </li>

          <li>
            <a href="{% url 'user:个人中心' %}" class="curr">
                <span class="am-icon-user"></span>
                <span class="am-navbar-label">我的</span>
            </a>
          </li>
      </ul>
</div>
{% endblock %}

{% block foot_js %}
    <script type='text/javascript'>
        (function () {
            new PopUp_api({el: '.index-qd', html: '.qd-box'});
        })()
    </script>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>

    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.12&key=5a380f6714c6175d618bf761212e0a5d&plugin=AMap.CitySearch"></script>
    <script type="text/javascript">

        //获取用户所在城市信息
        function showCityInfo() {
            //实例化城市查询类
            var citysearch = new AMap.CitySearch();
            //自动获取用户IP，返回当前城市
            citysearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    if (result && result.city && result.bounds) {
                        var cityinfo = result.city;
                        var citybounds = result.bounds;
                        document.getElementById('info').innerHTML = cityinfo;
                        //地图显示当前城市
                        map.setBounds(citybounds);
                    }
                } else {
                    document.getElementById('info').innerHTML = result.info;
                }
            });
        }

        showCityInfo();
    </script>
{% endblock %}
